import QtQuick 2.15

Item {
    id: root

    property real minValue: 0
    property real maxValue: 100
    property real value: 0
    property string title: ""
    property string unit: ""
    property int centerValue: 0
    property bool warningZone: false
    property real warningThreshold: 80

    Canvas {
        id: canvas
        anchors.fill: parent
        antialiasing: true

        property real centerX: width / 2
        property real centerY: height / 2
        property real radius: Math.min(width, height) / 2 - 20
        property real startAngle: -140 * Math.PI / 180
        property real endAngle: 140 * Math.PI / 180
        property real totalAngle: endAngle - startAngle
        property real valueAngle: startAngle + (root.value - root.minValue) / (root.maxValue - root.minValue) * totalAngle

        onValueAngleChanged: requestPaint()

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)

            // 外圈背景 - 深蓝黑色
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius + 5, 0, 2 * Math.PI)
            ctx.fillStyle = "#041024"
            ctx.fill()

            // 外圈发光效果
            var glowGradient = ctx.createRadialGradient(centerX, centerY, radius - 10, centerX, centerY, radius + 15)
            glowGradient.addColorStop(0, "rgba(0, 155, 255, 0.15)")
            glowGradient.addColorStop(0.5, "rgba(0, 155, 255, 0.1)")
            glowGradient.addColorStop(1, "rgba(0, 155, 255, 0)")
            
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius + 15, 0, 2 * Math.PI)
            ctx.fillStyle = glowGradient
            ctx.fill()

            // 外圈边框 - 蓝色
            ctx.strokeStyle = "#00AFFF"
            ctx.lineWidth = 2
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
            ctx.stroke()

            // 刻度环背景
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius - 15, 0, 2 * Math.PI)
            ctx.fillStyle = "#041830"
            ctx.fill()
            
            // 数值环形进度
            if (root.value > root.minValue) {
                // 正常区域 - 蓝色
                var normalEndAngle = Math.min(valueAngle, root.warningZone ? 
                    startAngle + (root.warningThreshold - root.minValue) / (root.maxValue - root.minValue) * totalAngle : 
                    valueAngle);
                
                if (normalEndAngle > startAngle) {
                    ctx.strokeStyle = "#00AFFF";
                    ctx.lineWidth = 6;
                    ctx.lineCap = "round";
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius - 20, startAngle, normalEndAngle);
                    ctx.stroke();
                }
                
                // 警告区域 - 红色
                if (root.warningZone && root.value > root.warningThreshold) {
                    var warningStartAngle = startAngle + (root.warningThreshold - root.minValue) / (root.maxValue - root.minValue) * totalAngle;
                    
                    ctx.strokeStyle = "#FF3232";
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius - 20, warningStartAngle, valueAngle);
                    ctx.stroke();
                }
            }

            // 刻度标记 - 蓝色调
            ctx.strokeStyle = "#00AFFF"
            ctx.lineWidth = 1
            ctx.font = "12px 'Segoe UI', Arial"
            ctx.fillStyle = "#00AFFF"
            ctx.textAlign = "center"

            var steps = 10 // 固定刻度数量
            for (var i = 0; i <= steps; i++) {
                var stepValue = root.minValue + (root.maxValue - root.minValue) * (i / steps)
                var angle = startAngle + (i / steps) * totalAngle
                
                // 主刻度
                var x1 = centerX + (radius - 25) * Math.cos(angle)
                var y1 = centerY + (radius - 25) * Math.sin(angle)
                var x2 = centerX + (radius - 15) * Math.cos(angle)
                var y2 = centerY + (radius - 15) * Math.sin(angle)

                ctx.beginPath()
                ctx.moveTo(x1, y1)
                ctx.lineTo(x2, y2)
                ctx.stroke()

                // 数值标签
                var labelX = centerX + (radius - 40) * Math.cos(angle)
                var labelY = centerY + (radius - 40) * Math.sin(angle)
                ctx.fillText(Math.round(stepValue).toString(), labelX, labelY + 4)
                
                // 次级刻度
                if (i < steps) {
                    for (var j = 1; j < 5; j++) {
                        var subAngle = angle + (totalAngle / steps) * (j / 5)
                        var subX1 = centerX + (radius - 22) * Math.cos(subAngle)
                        var subY1 = centerY + (radius - 22) * Math.sin(subAngle)
                        var subX2 = centerX + (radius - 18) * Math.cos(subAngle)
                        var subY2 = centerY + (radius - 18) * Math.sin(subAngle)
                        
                        ctx.beginPath()
                        ctx.moveTo(subX1, subY1)
                        ctx.lineTo(subX2, subY2)
                        ctx.stroke()
                    }
                }
            }
            
            // 中心圆形背景
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius - 60, 0, 2 * Math.PI)
            ctx.fillStyle = "#041024"
            ctx.fill()
            
            ctx.beginPath()
            ctx.arc(centerX, centerY, radius - 60, 0, 2 * Math.PI)
            ctx.strokeStyle = "#00AFFF"
            ctx.lineWidth = 1
            ctx.stroke()
            
            // 指针 - 发光效果
            ctx.save()
            ctx.shadowColor = "#00AFFF"
            ctx.shadowBlur = 15
            ctx.shadowOffsetX = 0
            ctx.shadowOffsetY = 0
            
            // 绘制主指针
            ctx.strokeStyle = "#00AFFF"
            ctx.lineWidth = 3
            ctx.beginPath()
            ctx.moveTo(centerX, centerY)
            var pointerX = centerX + (radius - 40) * Math.cos(valueAngle)
            var pointerY = centerY + (radius - 40) * Math.sin(valueAngle)
            ctx.lineTo(pointerX, pointerY)
            ctx.stroke()
            
            // 绘制指针底部三角形
            var baseAngle = valueAngle + Math.PI;
            var baseX = centerX + 10 * Math.cos(baseAngle);
            var baseY = centerY + 10 * Math.sin(baseAngle);
            var sideAngle1 = baseAngle + Math.PI/2;
            var sideAngle2 = baseAngle - Math.PI/2;
            var side1X = centerX + 5 * Math.cos(sideAngle1);
            var side1Y = centerY + 5 * Math.sin(sideAngle1);
            var side2X = centerX + 5 * Math.cos(sideAngle2);
            var side2Y = centerY + 5 * Math.sin(sideAngle2);
            
            ctx.fillStyle = "#00AFFF";
            ctx.beginPath();
            ctx.moveTo(pointerX, pointerY);
            ctx.lineTo(side1X, side1Y);
            ctx.lineTo(baseX, baseY);
            ctx.lineTo(side2X, side2Y);
            ctx.closePath();
            ctx.fill();
            
            ctx.restore()
            
            // 中心点
            ctx.beginPath();
            ctx.arc(centerX, centerY, 8, 0, 2 * Math.PI);
            ctx.fillStyle = "#00AFFF";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(centerX, centerY, 6, 0, 2 * Math.PI);
            ctx.fillStyle = "#FFFFFF";
            ctx.fill();
        }
    }

    // 标题 - 在仪表盘顶部
    Text {
        id: titleText
        anchors.top: parent.top
        anchors.topMargin: parent.height * 0.25
        anchors.horizontalCenter: parent.horizontalCenter
        text: root.title
        color: "#00AFFF"
        font.pixelSize: 18
        font.bold: true
        font.family: "Segoe UI"
    }

    // 中央数值显示
    Column {
        anchors.centerIn: parent
        spacing: 5

        Text {
            id: valueText
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.centerValue.toString()
            color: root.warningZone && root.value > root.warningThreshold ? "#FF3232" : "#FFFFFF"
            font.pixelSize: 48
            font.bold: true
            font.family: "Segoe UI"
        }

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.unit
            color: "#00AFFF"
            font.pixelSize: 14
            font.family: "Segoe UI"
        }
    }
}
